<template>
<div>
<!--    新增用户开始-->
    <el-dialog title="" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form.gender" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser(form)">确 定</el-button>
        </div>
    </el-dialog>
<!--    新增用户结束-->
    <!--    编辑用户开始-->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisible1">
        <el-form :model="form1">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form1.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-input v-model="form1.gender" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input v-model="form1.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="form1.phone" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="updateUser(form1)">确 定</el-button>
        </div>
    </el-dialog>
    <!--    编辑用户结束-->
    <el-card class="box-card">
        <el-row>
            <el-col :span='12'><el-input v-model='searchValue'  placeholder="请输入用户姓名"></el-input></el-col>
            <el-col :span='12'><el-button v-on:click='search(searchValue)' type="primary">检索</el-button></el-col>
        </el-row>
        <br>
        <br>
        <el-button type="primary" @click='dialogFormVisible=true'>添加用户</el-button>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                type='index'
                prop="index"
                label="序号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="user.username"
                label="账号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="user.name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="user.gender"
                label="性别"
                width="120">
            </el-table-column>
            <el-table-column
                prop="user.phone"
                label="电话"
                width="120">
            </el-table-column>
            <el-table-column
                prop="user.address"
                label="地址"
                width="300">
            </el-table-column>
            <el-table-column
                prop="roleName"
                label="角色"
                width="120">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="130">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small"  @click="deleteUser(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            @current-change="currentChange"
            :current-page="current"
            :total="total">
        </el-pagination>
    </el-card>
</div>
</template>

<script>
export default {
    created() {
        this.$http.get("/v1/user/list").then(res => {
            this.tableData = res.records
            this.current = res.current
            this.total = res.total
        })
    },
    data() {
        return {
            total:100,
            current:1,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            tableData: [],
            form: {},
            form1: {},
            formLabelWidth: '120px',
            searchValue:''
        }
    },
    name: 'index',
    methods: {
        handleClick(row) {
            console.log(row);
            this.form1 = row.user
            this.dialogFormVisible1 = true
        },
        addUser(data){
            this.$http.post("/v1/user/save",data).then(res => {
                this.dialogFormVisible = false
                this.form = {}
                this.$notify({
                    title: '成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
                this.$http.get("/v1/user/list").then(res => {
                    this.tableData = res.records
                })
            })
        },
        updateUser(data){
            this.$http.post("/v1/user/save",data).then(res => {

                this.dialogFormVisible1 = false
                this.$notify({
                    title: '成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                });
                this.form1 = {}
                this.$http.get("/v1/user/list").then(res => {
                    this.tableData = res.records
                })
            })
        },
        deleteUser(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get("/v1/user/delete?id="+id.user.id).then(res =>{
                    this.$http.get("/v1/user/list").then(res => {
                        this.tableData = res.records
                    })
                })
            })

        },
        currentChange(current){
            this.$http.get("/v1/user/list?page="+current * 1).then(res => {
                this.tableData = res.records
                this.current = res.current
                this.total = res.total
            })
        },
        search(name){
            this.$http.get("/v1/user/search?name="+name).then(res =>{
                this.tableData = res
            })
        }
    }
}
</script>

<style scoped>

</style>
